<template>
<div class="y-table" :class="[border && 'y-table--border', stripe && 'y-table--stripe']">
  <div class="y-table__header-wrap" ref="headerWrap">
    <table>
      <colgroup>
        <col
          v-for="col in columns"
          :key="col.prop"
          :width="columnsWidthMap[col.prop] + 'px'"
        />
        <!-- <col v-if="hasScrollableY" :width="scrollBarWidth + 'px'" /> -->
      </colgroup>
      <thead>
        <tr>
          <th ref="headerCell" v-for="col in columns" :key="col.prop">
            {{col.label}}
          </th>
          <!-- <th v-if="hasScrollableY" class="y-table__gutter"></th> -->
        </tr>
      </thead>
    </table>
  </div>
  <div ref="bodyWrap" class="y-table__body-wrap" :style="bodyWrapStyle">
    <table ref="body">
      <colgroup>
        <col
          v-for="col in columns"
          :key="col.prop"
          :width="columnsWidthMap[col.prop] + 'px'"
        />
      </colgroup>
      <tbody>
        <tr v-for="(data, index) in dataSource" :key="index">
          <td ref="bodyCell" v-for="col in columns" :key="col.prop">
            {{data[col.prop]}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
</template>
<script>
import { debug } from '../src/util'
import scrollBarWidth from './scrollbar-width'
const log = debug({
  prefix: 'y-table:',
  disabled: false,
})
export default {
  name: 'y-table',
  props: {
    dataSource: {
      type: Array,
      default() {
        return []
      },
    },
    columns: {
      type: Array,
      required: true,
    },
    border: {
      type: Boolean,
      default: false
    },
    stripe: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number
    }
  },
  data () {
    return {
      // 是否已经 mounted
      isMounted: false,
      // 是否有垂直滚动条
      hasScrollableY: false,
      // 初始 headerWrap 的高度
      initHeaderWrapHeight: 0,
      // 内容的高度
      bodyWrapHeight: 0,
      // 滚动条的宽度
      scrollBarWidth: scrollBarWidth(),
      // 列的宽度
      columnsWidthMap: {},
      // 经过处理的列的定义
      fixedColumns: this.columns
    }
  },
  computed: {
    bodyWrapStyle() {
      return {
        height: this.bodyWrapHeight && this.bodyWrapHeight + 'px'
      }
    },
  },
  watch: {
    height () {
      this.$nextTick(() => {
        this.initHeight()
        this.initColumnWidth()
      })
    },
    columns () {
      this.$nextTick(() => {
        this.initColumnWidth()
      })
    },
  },
  methods: {
    // 计算内容的高度，是否有滚动条
    initHeight() {
      if (!this.isMounted) return false
      log('initHeight')
      let bodyHeight = this.$refs.body.offsetHeight
      log('get bodyHeight:', bodyHeight)
      if (this.height) {
        this.bodyWrapHeight = this.height - this.initHeaderWrapHeight
        // 如果设置的高度小于表格本身的高度则会产生垂直滚动条并且表头固定
        if (this.bodyWrapHeight < bodyHeight) {
          this.hasScrollableY = true
        } else {
          this.hasScrollableY = false
        }
      } else {
        this.bodyWrapHeight = this.bodyHeight
        this.hasScrollableY = false
      }
    },
    /**
     * 计算每列的宽度
     */
    initColumnWidth() {
      if (!this.isMounted) return false
      // let gridWidth = this.$refs.bodyWrap.offsetWidth
      this.$nextTick(() => {
        log('initColumnWidth')
        let cells = this.$refs.bodyCell || this.$refs.headerCell || [];
        this.fixedColumns = this.columns.map((column, index) => {
          let width = cells[index] && cells[index].offsetWidth
          this.columnsWidthMap[column.prop] = width
          return {
            ...column,
            width
          }
        })
        log('columnsWidthMap: ', this.columnsWidthMap)
      })
    }
  },
  mounted () {
    this.isMounted = true
    this.initHeaderWrapHeight = this.$refs.headerWrap.offsetHeight
    this.initHeight()
    this.initColumnWidth()
  }
}
</script>
<style lang="scss">
$border-color: #ebeef5;
$tr-hover-color: scale-color($border-color, $lightness: 30%);

.y-table {
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    font-size: 14px;
    color: #606266;
    background: #fff;
    table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      box-sizing: border-box;
      table-layout: fixed;
      th, td {
        text-align: left;
        border-bottom: 1px solid $border-color;
        padding: 10px;
      }
    }
    &.y-table--border {
      table {
        th, td {
          border: 1px solid $border-color;
        }
      }
    }
    &.y-table--stripe {
      tbody {
        tr:nth-child(2n) {
          background-color: $tr-hover-color;
        }
      }
    }
    .y-table__body-wrap {
      overflow: auto;
    }
}
</style>
